import React, { useState, useEffect, useRef } from 'react';
import style from './index.module.css';
import { Space, Select, Button, Checkbox, message } from 'antd';
import { getMoban } from '../../request/index';

function Index() {
    // 定义状态变量
    const [list, setList] = useState([]); // 商品列表
    const [filteredList, setFilteredList] = useState([]); // 筛选后的商品列表 
    const [shopName, setShopName] = useState(''); // 店铺名称输入
    const [productName, setProductName] = useState(''); // 商品名称输入
    const [selectedItems, setSelectedItems] = useState(new Set()); // 选中的商品ID集合
    const [loading, setLoading] = useState(false); // 加载状态
    const loadMoreRef = useRef(null); // 观察加载指示器的引用

    useEffect(() => {
        // 组件挂载后获取商品数据
        getMoban().then((res) => {
            setList(res.data); // 设置商品列表
            setFilteredList(res.data); // 初始化筛选列表为完整商品列表
        });
    }, []);

    // 全选或取消全选处理函数
    const onChangeAll = (e) => {
        const checked = e.target.checked; // 获取全选框状态
        if (checked) {
            // 全选操作
            const allIds = new Set(filteredList.map(item => item.id)); // 获取当前筛选列表中所有商品ID
            setSelectedItems(allIds); // 更新选中的商品ID集合
        } else {
            // 取消全选
            setSelectedItems(new Set()); // 清空选中的商品ID集合
        }
    };

    // 单个商品选择处理函数
    const onChangeItem = (id) => {
        const newSelectedItems = new Set(selectedItems); // 创建新的集合以保持不变
        if (newSelectedItems.has(id)) {
            newSelectedItems.delete(id); // 如果当前商品已选中，则取消选择
        } else {
            newSelectedItems.add(id); // 否则，添加到选中集合中
        }
        setSelectedItems(newSelectedItems); // 更新选中的商品ID集合
    };


    // 搜索功能
    const Search = () => {
        const filtered = list.filter((item) => {
            // 根据店铺名称和商品名称进行筛选
            return (
                item.title.includes(shopName) && item.desc.includes(productName)
            );
        });
        setFilteredList(filtered); // 更新筛选后的商品列表
    };

    // 切换商品状态
    const zhuangTai = (id) => {
        const updatedList = filteredList.map(item => {
            if (item.id === id) {
                // 切换状态
                return { ...item, status: !item.status }; // 状态反转
            }
            return item;
        });
        setFilteredList(updatedList); // 更新筛选后的商品列表
    };
    const [messageApi, contextHolder] = message.useMessage();
    // 批量修改状态
    const setItemsToGood = () => {
        const updatedList = filteredList.map(item => {
            if (selectedItems.has(item.id) && item.status === false) {
                return { ...item, status: true }; // 将正常状态的商品设置为好货
            }
            return item; // 其他商品不变
        });
        setFilteredList(updatedList); // 更新筛选后的商品列表
        messageApi.open({
            type: 'success',
            content: '批量修改成功',
        });
    };

    // 删除
    const DEL = (id) => {
        const updatedList = filteredList.filter(item => item.id !== id);
        setFilteredList(updatedList); // 更新状态
        setSelectedItems(item => {
            const newSelectedItems = new Set(item);
            newSelectedItems.delete(id); // 如果被选中，删除选中的 ID
            return newSelectedItems;
        });

        messageApi.open({
            type: 'success',
            content: '删除成功',
        });
    }

    // 下架
    const XIAJIA = (id) => {
        const updatedList = filteredList.map(item => {
            if (item.id === id) {
                return { ...item, isDown: true };
            }
            return item;
        });
        setFilteredList(updatedList);
        messageApi.open({
            type: 'success',
            content: '已下架',
        });
    };

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting && !loading) {
                setLoading(true);
                loadMoreItems();
            }
        });

        if (loadMoreRef.current) {
            observer.observe(loadMoreRef.current);
        }

        return () => {
            if (loadMoreRef.current) {
                observer.unobserve(loadMoreRef.current);
            }
        };
    }, [loadMoreRef, loading]);

    // 加载更多商品的函数
    const loadMoreItems = () => {
        // 模拟 API 调用，实际应替换为具体接口
        setTimeout(() => {
            // 这里模拟新商品
            const newItems = [
                { id: 1111111111, title: '果行经营二部', desc: '会起料必产山它使例年些在公石就层许权属算六集局世光需养好带多要', price: 100, status: true, img: 'https://img0.baidu.com/it/u=1008951549,1654888911&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', liang: 10, time: '2024-01-01' },
                { id:  2222221212122, title: '老郭记自营店', desc: '件素上整华新装专变六比说安平低值科程完量大西算三文期第区照因打次', price: 200, status: false, img: 'https://img0.baidu.com/it/u=2270376806,4081867958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', liang: 20, time: '2024-01-02' },
            ];
            // 可以根据需求更新 newItems 来进行分页加载
            setFilteredList((prev) => [...prev, ...newItems]); // 更新筛选后的商品列表
            setLoading(false); // 重置加载状态
        }, 1000);
    };

    return (
        <div className={style.box}>{contextHolder}
            <div className={style.Top}>
                <h2>商品管理</h2><br />
                <div>
                    {/* 商品大类选择框 */}
                    商品大类: <Space wrap>
                        <Select
                            defaultValue="请选择大类"
                            style={{ width: 320, marginTop: -10 }}
                            options={[
                                { value: 'xxxxxxxx', label: 'xxxxxxxx' },
                                { value: 'oooooooo', label: 'oooooooo' },
                            ]}
                        />
                    </Space>
                    <span style={{ margin: "0 20px" }}></span>
                    {/* 商品小类选择框 */}
                    商品小类: <Space wrap>
                        <Select
                            defaultValue="请选择小类"
                            style={{ width: 320, marginTop: -10 }}
                            options={[
                                { value: 'ooooooooo', label: 'ooooooooo' },
                                { value: 'xxxxxxxxx', label: 'xxxxxxxxx' },
                            ]}
                        />
                    </Space>
                    <span style={{ margin: "0 20px" }}></span>
                    {/* 曝光类型选择框 */}
                    曝光类型: <Space wrap>
                        <Select
                            defaultValue="全部"
                            style={{ width: 150, marginTop: -10 }}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '大爆', label: '大爆' },
                                { value: '小爆', label: '小爆' },
                            ]}
                        />
                    </Space>
                </div>
                <div style={{ marginTop: "30px" }}>
                    {/* 店铺名称输入框 */}
                    店铺名称:&emsp;
                    <input
                        type="text"
                        style={{ width: 320, height: "30px", marginTop: -10 }}
                        placeholder='请输入店铺名称'
                        value={shopName}
                        onChange={(e) => setShopName(e.target.value)}
                    />
                    <span style={{ margin: "0 20px" }}></span>
                    {/* 商品名称输入框 */}
                    商品名称:&emsp;
                    <input
                        type="text"
                        style={{ width: 320, height: "30px", marginTop: -10 }}
                        value={productName}
                        onChange={(e) => setProductName(e.target.value)}
                    />
                </div>
                <div style={{ marginTop: "30px" }}>
                    {/* 搜索和清空筛选按钮 */}
                    <Button type="primary" onClick={Search}>搜索</Button>&emsp;
                    <Button onClick={() => {
                        setShopName('');
                        setProductName('');
                        setFilteredList(list);
                        setSelectedItems(new Set());
                    }}>清空筛选条件</Button>&emsp;
                    <Button>设置模版</Button>
                </div>
            </div>
            {/* 选择框和批量操作按钮 */}
            <div style={{ height: "40px", background: "#f7f8fa", lineHeight: "40px" }}>
                <Checkbox
                    onChange={onChangeAll} // 全选/取消全选处理
                    checked={filteredList.length > 0 && selectedItems.size === filteredList.length} // 判断全选框状态
                    style={{ marginLeft: '10px' }}
                >
                    全选
                </Checkbox>
                <Button onClick={setItemsToGood}>批量设为好货</Button> {/* 触发批量操作的按钮 */}
            </div>
            {/* 表头 */}
            <div style={{ display: "flex", borderBottom: "1px solid #ccc", height: "40px", lineHeight: "40px" }}>
                <div className={style.kuang}></div>
                <div className={style.desc}>商品描述</div>
                <div className={style.price}>价格</div>
                <div className={style.liang}>销量</div>
                <div className={style.title}>店铺</div>
                <div className={style.time}>创建时间</div>
                <div className={style.caozuo}>操作</div>
            </div>
            {/* 渲染商品列表 */}
            {
                filteredList.map((item) => {
                    return (
                        <div key={item.id} className={style.zhu}>
                            <div className={style.kuang}>
                <Checkbox
                  checked={selectedItems.has(item.id)} // 判断该商品是否被选中
                  onChange={() => onChangeItem(item.id)} // 单个商品选择处理
                  style={{ marginLeft: '10px' }}
                ></Checkbox>
              </div>
                            <div className={style.desc}>
                                <img src={item.img} alt="" />
                                <div>
                                    <p style={{ lineHeight: "36px" }}>
                                        {item.desc}
                                        <b style={{ float: "right", color: "red" }}>
                                            {item.isDown ? '已下架' : (item.status === true ? '好货' : '正常')}
                                        </b>
                                    </p>
                                </div>
                            </div>
                            <div className={style.price}><span className={style.s2}>￥{item.price}.0</span></div>
                            <div className={style.liang}><span className={style.s2}>{item.liang}</span></div>
                            <div className={style.title}><span className={style.s2}>{item.title}</span></div>
                            <div className={style.time}><span className={style.s2}>{item.time}</span></div>
                            <div className={style.caozuo}>
                                <span onClick={() => zhuangTai(item.id)}>设为{item.status === true ? '正常' : '好货'}</span>
                                <span onClick={() => XIAJIA(item.id)}>下架</span>
                                <span onClick={() => DEL(item.id)}>删除</span>
                            </div>
                        </div>
                    );
                })
            }

            {/* 加载指示器 */}
            <div ref={loadMoreRef} style={{ height: '20px', textAlign: 'center', margin: '20px 0' }}>
                {loading && <span>正在加载更多...</span>}
            </div>
        </div>
    );
}

export default Index;
